<template>
	<view class="shop-coupon-grant">
		<!-- 发放优惠券提示语 -->
		<view class="shop-coupon-grant_head">
			<p style="font-size: 20px;font-weight: bold;margin-top: 20px;color: white;">店铺优惠卷</p>
			<p style="font-size: 18px;font-weight: bold;margin-top: 20px;color: white;margin-top: 40px;">用于本店，买家购买本店商品时</p>
			<p style="font-size: 18px;font-weight: bold;margin-top: 20px;color: white;margin-top: 20px;">凭券抵扣现金</p>
			<p style="font-size: 18px;font-weight: bold;margin-top: 20px;color: white;margin-top: 20px;">注意发放金额及发放优惠券数量</p>
			<p style="font-size: 18px;font-weight: bold;margin-top: 20px;color: white;margin-top: 20px;">避免造成本店损失</p>
		</view>
		<!-- 发放优惠券功能 -->
		<view class="shop-coupon-grant_body">
			<p style="margin-top: 30px;font-weight: bold;font-size: 18px;">发放优惠券店铺为</p>
			<p style="margin-top: 20px;font-weight: bold;font-size: 18px;color: red;">{{this.shopName}}</p>
			<image src="../../static/red_envelope.png"  style="margin-top: 10px;width: 100px;height:100px;"></image>
			<u-button type="primary" style="width: 120px;height: 40px;margin-top: 20px;" @click="show=true">立即发放</u-button>
		</view>
		<u-popup :show="show" mode="bottom" @close="closeShow" border-radius="60" >
			<view style="width: 300px;height: 480px;">
				<p style="font-weight: bold;font-size: 18px;margin-left: 160px;margin-top:30px">发放优惠券</p>
				<u-form :model="couponFormData" ref="couponForm">
					<u-form-item label="优惠券名称" label-width="85" prop="couponName">
						<u-input
							v-model="couponFormData.couponName" 
							placeholder="请输入优惠券名称"
							border="none"
						/>
					</u-form-item>
					<u-form-item label="优惠金额" label-width="85" prop="couponPrice">
						<u-input
							v-model="couponFormData.couponPrice" 
							placeholder="请输入优惠金额"
							border="none"
						/>
					</u-form-item>
					<u-form-item label="领取方式" label-width="75" prop="collectionId">
						<u-radio-group v-model="couponFormData.collectionId" @change="choseCouponCollection">
							<u-radio
								:customStyle="{marginRight: '16px'}"
								v-for="(item, index) in collectionList"
								:key="index"
								:label="item.collectionName"
								:name="item.id"
								
							>
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="吃货豆数量" label-width="85" v-show="eatBeanShow" prop="eatBean">
						<u-input
							v-model="couponFormData.eatBean" 
							placeholder="请输入吃货豆数量"
							border="none"
						/>
					</u-form-item>
					<u-form-item label="发放券数量" label-width="85" prop="issuedQuantity">
						<u-input
							v-model="couponFormData.issuedQuantity" 
							placeholder="请输入发放红包数量"
							border="none"
						/>
					</u-form-item>
					<u-form-item label="红包类型" label-width="75" prop="redEnvelopeType">
						<u-radio-group v-model="couponFormData.redEnvelopeType" @change="choseRedEnvelopeType">
							<u-radio
								:customStyle="{marginRight: '16px'}"
								v-for="(item, index) in redEnvelopeTypeList"
								:key="index"
								:label="item.redEnvelopeTypeName"
								:name="item.id"
								
							>
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="满减红包价格" label-width="95" v-show="fullDecrementShow" prop="fullDecrementPrice">
						<u-input
							v-model="couponFormData.fullDecrementPrice" 
							placeholder="请输入满减红包价格"
							border="none"
						/>
					</u-form-item>
					<u-form-item label="优惠券过期时间" label-width="115" @click="calendarShow=true">
						<p v-show="timeShow">{{aa | formateDate}}</p>
						 <u-datetime-picker
							:show="calendarShow"
							v-model="value1"
							mode="datetime"
							@cancel="closeCalendar"
							@confirm="couponUpdateTime"
						></u-datetime-picker>

					</u-form-item>	
				</u-form>
				<u-button type="primary" style="width: 90px;margin-top: 30px;margin-left: 150px;" text="发放" @click="shopPublishComment"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 发放优惠券弹窗默认false
				show:false,
				// 领取方式
				collectionList:[
					{
						id:1,
						collectionName:'免费领取'
					},
					{
						id:3,
						collectionName:'吃货豆兑换'
					}
				],
				// 红包类型
				redEnvelopeTypeList:[
					{
						id:1,
						redEnvelopeTypeName:'无门槛红包'
					},
					{
						id:2,
						redEnvelopeTypeName:'满减红包'
					}
				],
				//优惠卷发放数组
				couponFormData:{
					// 优惠卷名称
					couponName:'',
					// 优惠金额
					couponPrice:'',
					// 领取方式
					collectionId:'',
					// 发放优惠劵的店铺id
					shopId:'',
					// 发放优惠卷数量
					issuedQuantity:'',
					// 发放时间
					createTime:'',
					// 吃货豆数量
					eatBean:0,
					// 红包类型
					redEnvelopeType:'',
					// 满减价格
					fullDecrementPrice:0,
					// 过期时间
					updateTime:'',
					
				},
				// 吃货豆兑换数量框默认flase
				eatBeanShow:false,
				// 满减红包价格框默认false
				fullDecrementShow:false,
				// 头部获取商店id
				shopId:'',
				// 商家发放优惠券的校验规则
				couponRules:{
					// 优惠券名称
					couponName:[
						{
							type: 'string',
							required: true,
							message: '请输入优惠券名称',
							trigger: ['blur', 'change'],
						}
					],
					// 优惠券金额
					couponPrice:[
						{
							type: 'number',
							required: true,
							message: '请输入优惠金额',
							trigger: ['change']
						}
					],
					// 领取类型
					collectionId:[
						{
							type: 'number',
							required: true,
							message: '请选择领取类型',
							trigger: ['change']
						}
					],
					// 发放优惠券数量
					issuedQuantity:[
						{
							type: 'number',
							required: true,
							message: '请输入发放优惠券数量',
							trigger: ['change']
						}
					],
					// 红包类型
					redEnvelopeType:[
						{
							type: 'number',
							required: true,
							message: '请选择红包类型',
							trigger: ['change']
						}
					],
					// 吃货豆数量
					eatBean:[
						{
							type: 'number',
							required: true,
							message: '请输入吃货豆数量',
							trigger: ['change']
						}
					],
					// 满减价格
					fullDecrementPrice:[
						{
							type: 'number',
							required: true,
							message: '请输入满减价格',
							trigger: ['change']
						}
					]
				},
				// 日历选择器默认false
				calendarShow:false,
				// 选择优惠券过期时间默认值
				value1: Number(new Date()),
				// 优惠券过期时间默认false
				timeShow:false,
				// 存放优惠券过期时间
				aa:"",
				// 存放商家名称
				shopName:'',
			}
		},
		// 将时间戳转为标准时间格式
		filters:{
			formateDate (num) {
				let date = new Date(num);
				 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;//月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;//天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;//小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;//分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;//秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
			}
		},
		watch: {
			// 监听立即购买弹窗弹出是，加载couponForm的校验规则
			show (newData) {
				if (newData === true) {
					this.$nextTick().then(() => {
						this.$refs.couponForm.setRules(this.couponRules)
					})
				}
			}
		},
		mounted() {
			// 从头部获取商店id
			this.shopId = uni.getStorageSync('shopId')
			// 根据商店id获取商店名称
			this.getShipIdToShopName()
		},
		
		methods:{
			getShipIdToShopName(){
				this.$myRequest({
					url:'/eat-service/shop/getShipIdToShopName',
					data:{
						shopId: this.shopId
					}
				}).then(res=>{
					this.shopName = res.data.obj.shopName
				})
			},
			// 优惠券过期时间选中时
			couponUpdateTime(e){
				this.aa = e.value
				this.timeShow = true
				this.calendarShow = false
			},
			// 关闭发放优惠券过期弹窗方法
			closeCalendar(){
				this.calendarShow = false
			},
			operationConfirm(e) {
				console.log(e.value)
			},
			// 关闭优惠券弹窗
			closeShow(){
				this.show = false
				this.timeShow = false
			},
			// 选择发放优惠券领取类型时
			choseCouponCollection(){
				if(this.couponFormData.collectionId === 3)
					this.eatBeanShow = true
					
				else {
					this.eatBeanShow = false
					this.couponFormData.eatBean = 0
					this.couponFormData.fullDecrementPrice = 0
				}
					
			},
			// 选择红包类型时
			choseRedEnvelopeType(){
				if(this.couponFormData.redEnvelopeType === 2)
					this.fullDecrementShow = true
				else{
					this.fullDecrementShow = false
					this.couponFormData.fullDecrementPrice = 0
				}
					
			},
			// 发放优惠券方法
			shopPublishComment(){
				this.$refs.couponForm.validate().then(res => {
					this.couponFormData.shopId = this.shopId
					this.couponFormData.updateTime = this.aa
					this.$myRequest({
						url:'/eat-service/shopCouponIssued/shopPublishComment',
						data: JSON.stringify(this.couponFormData),
						method:'POST',
					}).then(res=>{
						if(res.data.flag){
							this.show = false
							this.timeShow = false
							uni.showToast({
								title: '发放成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					})
				})
			},
		}
	}
	
</script>

<style>
	.shop-coupon-grant{
		width: 418px;
		height: 800px;
		overflow: hidden;
	}
	.shop-coupon-grant_head{
		width: 418px;
		height: 320px;
		background-color: #EF8385;
		text-align: center;
		overflow: hidden;
	}
	.shop-coupon-grant_body{
		width: 418px;
		height: 300px;
		background-color: #E4E4E4;
		text-align: center;
		overflow: hidden;
	}
	


</style>